<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">备件台账</div>
                    <div class="layui-card-body">
                        <div style="margin-bottom: 10px;">
                            <div class="layui-input-item" style="float:left;padding-right:10px;">
                                <form class="layui-form">
                                    <div class="layui-inline" style="width:150px;">
                                        <select id="search-type">
                                            <option value="">请选择备件类型</option>
                                            <option value="1">电气</option>
                                            <option value="2">管道</option>
                                            <option value="3">消防</option>
                                            <option value="4">五金</option>
                                            <option value="5">其它</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline" style="width:150px;">
                                        <select id="search-warehouseId" lay-search>
                                            <option value="">选择仓库</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline" style="width:150px;">
                                        <input id="search-name" type="text" placeholder="请输入名称"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline" style="width:150px;">
                                        <input id="search-brand" type="text" placeholder="请输入品牌"
                                            class="layui-input layui-input-search">
                                    </div>

                                    <div class="layui-inline" style="width:150px;">
                                        <input id="search-model" type="text" placeholder="请输入型号/规格"
                                            class="layui-input layui-input-search">
                                    </div>
                                    <div class="layui-inline">
                                        <a id="search-btn" class="layui-btn">查找</a>
                                    </div>
                                </form>
                            </div>
                            <div style="float:right;">
                                <a id="add-btn" class="layui-btn">添加</a>
                                <a id="tpl-btn" class="layui-btn layui-btn-primary">模板</a>
                                <a id="import-btn" class="layui-btn layui-btn-primary">导入</a>
                                <a id="export-btn" class="layui-btn layui-btn-primary">导出</a>
                                <a id="btn-batch-delete" class="layui-btn layui-btn-danger">删除</a>
                                <a id="refresh-btn" class="layui-btn layui-btn-primary">刷新</a>
                            </div>
                            <div style="clear:both;"></div>
                        </div>
                        <table class="layui-hide" id="sparepart-table" lay-filter="sparepart-table"></table>
                        <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="sparepart-form">
    <div class="layui-card">
        <div class="layui-card-header">备品备件详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="sparepart-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">*备件类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required">
                            <option value="">请选择备件类型</option>
                            <option value="1">电气</option>
                            <option value="2">管道</option>
                            <option value="3">消防</option>
                            <option value="4">五金</option>
                            <option value="5">其它</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">*备件名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">品牌</label>
                    <div class="layui-input-block">
                        <input type="text" name="brand" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">型号/规格</label>
                    <div class="layui-input-block">
                        <input type="text" name="model" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数量</label>
                    <div class="layui-input-block">
                        <input type="number" name="quantity" class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存上限</label>
                    <div class="layui-input-block">
                        <input type="number" name="upper" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">库存下限</label>
                    <div class="layui-input-block">
                        <input type="number" name="lower" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">单位</label>
                    <div class="layui-input-block">
                        <input type="text" name="unit" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">出厂编号</label>
                    <div class="layui-input-block">
                        <input type="text" name="productNo" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生产日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="productDate" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">仓库</label>
                    <div class="layui-input-block">
                        <select id="warehouseId" name="warehouseId" lay-search>
                            <option value="">请选择仓库</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                        <input type="text" name="note" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定</button>
                </div>
            </form>
        </div>
    </div>
</script>
    <script src="/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table', 'form', 'laydate', 'upload'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            var admin = layui.admin;
            var upload = layui.upload;
            var popupIndex;

            upload.render({
                elem: '#import-btn',
                url: 'spareparts/import',
                auto: true,
                size: 2048,
                accept: 'file',
                exts: 'xlsx',
                before: function () {
                    layer.load();
                },
                done: function (result) {
                    layer.closeAll('loading');
                    if (result.msg) {
                        layer.alert(result.msg, {
                            area: '800px',
                            skin: 'layui-layer-molv'
                        });
                    } else {
                        layer.msg('导入成功');
                    }
                    search();
                }
            });

            loadWarehouse(function (result) {
                for (var i in result) {
                    var item = result[i];
                    $('#search-warehouseId').append('<option value="' + item.id + '">' + item.name + '</option>');
                }
                form.render();
            });

            /**
                    * 加载仓库
                    * @param callback
                    */
            function loadWarehouse(callback) {
                $.get('sparepartWarehouses', function (result) {
                    if (callback) {
                        callback(result.data);
                    }
                });
            }

            table.render({
                elem: '#sparepart-table',
                url: 'spareparts',
                title: '',
                skin: 'line',
                cols: [[
                    { type: 'checkbox' },
                    {
                        title: '序号', width: 60, templet: function (d) {
                            return d.LAY_TABLE_INDEX + 1;
                        }
                    },
                    { field: 'typeText', title: '备件类型' },
                    { field: 'name', title: '备件名称' },
                    { field: 'brand', title: '品牌' },
                    { field: 'model', title: '型号/规格' },
                    { field: 'quantity', title: '数量' },
                    { field: 'upper', title: '上限' },
                    { field: 'lower', title: '下限' },
                    { field: 'unit', title: '单位' },
                    { field: 'warehouseName', title: '仓库' },
                    { field: 'note', title: '备注' },
                    { fixed: 'right', title: '操作', toolbar: '#toolbar-operation' }
                ]],
                page: true
            });

            function showSparepartForm(data) {
                popupIndex = admin.popupRight({
                    area: '360px',
                    success: function () {
                        var formHtml = $('#sparepart-form').html();
                        $('#' + this.id).html(formHtml);
                        loadWarehouse(function (result) {
                            for (var i in result) {
                                var item = result[i];
                                $('#warehouseId').append('<option value="' + item.id + '">' + item.name + '</option>');
                            }
                            if (data) {
                                form.val('sparepart-form', data);

                            }
                            form.render();
                        });
                        form.render();
                    }
                });
                return popupIndex;
            }

            function closePopupForm() {
                if (popupIndex) {
                    layer.close(popupIndex);
                }
            }

            function search() {
                table.reload('sparepart-table', {
                    where: {
                        type: $('#search-type').val(),
                        name: $('#search-name').val(),
                        brand: $('#search-brand').val(),
                        model: $('#search-model').val(),
                        warehouseId: $('#search-warehouseId').val(),
                    },
                    page: {
                        curr: 1
                    }
                });
            }

            $(document).on('keypress', function (e) {
                if (e.which == 13) {
                    search();
                }
            });

            $("#search-btn").on('click', function () {
                search();
            });

            $("#add-btn").on('click', function () {
                popupIndex = showSparepartForm();
            });

            $("#tpl-btn").on('click', function () {
                window.open("/tpl/sparepart.xlsx");
            });

            $("#export-btn").on('click', function () {
                window.open("spareparts/export");
            });

            $("#refresh-btn").on('click', function () {
                table.reload('sparepart-table');
                layer.msg('表格已刷新');
            });

            $("#btn-batch-delete").on('click', function () {
                layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
                    var ids = [];
                    var data = table.checkStatus('sparepart-table').data;
                    for (let i in data) {
                        ids.push(data[i].id);
                    }
                    $.ajax({
                        url: 'spareparts/' + ids.toString(),
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 200) {
                                layer.msg('删除成功');
                                table.reload('sparepart-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                });
            });

            table.on('tool(sparepart-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('真的删除该记录吗？', function (index) {
                        $.ajax({
                            url: 'spareparts/' + data.id,
                            type: 'DELETE',
                            success: function (result) {
                                if (result.code == 200) {
                                    layer.msg('删除成功');
                                    table.reload('sparepart-table');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    showSparepartForm(data);
                    // form.val('sparepart-form', data);

                }
            });

            form.on('submit(form-submit)', function (data) {
                $.ajax({
                    url: 'spareparts',
                    type: 'PUT',
                    data: data.field,
                    success: function (result) {
                        if (result.code == 200) {
                            layer.msg('操作成功');
                            table.reload('sparepart-table');
                        } else {
                            layer.msg('提交失败');
                            console.error('提交失败');
                        }
                    }
                });
                closePopupForm();
                return false;
            });

        });
    </script>
</body>

</html>